import React,{ Component } from 'react';
import {
	View,
	Text,
	Modal,
	StyleSheet,
	TouchableOpacity
} from 'react-native';
import Picker from 'react-native-picker';

const monthes = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];

//生命month对象
class MonthPickerBase{
	constructor({curMonth,minDate,maxDate,onPickerConfirm,onPickerCancel,onPickerSelect}) {
		this.curMonth = curMonth;
		this.onPickerConfirm = onPickerConfirm;
		this.onPickerCancel = onPickerCancel;
		this.onPickerSelect = onPickerSelect;
		this.pickerData = this.getPickerData(minDate,maxDate);
		//console.log(this.pickerData)
		this.selectedValue = this.getSelectedValue(curMonth);
		//console.log(this.selectedValue)
		this.init();
	}

	getPickerData = (min,max)=>{
		const minYear = parseInt(min.split('-')[0]);
		const maxYear = parseInt(max.split('-')[0]);
		const minMonth = parseInt(min.split('-')[1]);
		const maxMonth = parseInt(max.split('-')[1]);
		const years = [];
		const minMonthes = [];
		const maxMonthes = [];
		years.push(minYear);
		if(minYear !== maxYear){
			for(let i=0; i<(maxYear-minYear); i++){
				years.push(years[years.length - 1]+1)
			}
		}
		//console.log(years)
		
		minMonthes.push(minMonth);
		if(minMonth !== 12){
			for (var i = 0; i < (12-minMonth); i++) {
				minMonthes.push(minMonthes[minMonthes.length-1]+1)
			}
		}
		//console.log(this.numTransformToMonth(minMonthes))

		maxMonthes.push(maxMonth);
		if(maxMonth !== 1){
			for (var i = 0; i < maxMonth-1; i++) {
				maxMonthes.unshift(maxMonthes[0] - 1)
			}
		}
		//console.log(this.numTransformToMonth(maxMonthes))

		return years.map((item,index)=>{
			const obj = {};
			if(index === 0){
				obj[item] = this.numTransformToMonth(minMonthes);
				return obj;
			}else if(index === years.length-1){
				obj[item] = this.numTransformToMonth(maxMonthes);
				return obj;
			}else{
				obj[item] = monthes
				return obj;
			}
		})

	}

	numTransformToMonth = (data)=>{		
		return data.map((item)=>monthes[item-1]);
	}

	getSelectedValue = (data)=>{
		const curResult = [];
		const curYear = parseInt(data.split('-')[0]);
		const curMonth = parseInt(data.split('-')[1]);
		curResult.push(curYear);
		curResult.push(monthes[curMonth-1]);
		return curResult;
	}

	init = ()=>{
		Picker.init({
		    pickerData: this.pickerData,
		    selectedValue: this.selectedValue,
		    pickerCancelBtnText:'取消',
		    pickerCancelBtnColor:[245, 69, 69, 1],
		    pickerConfirmBtnText:'确定',
		    pickerConfirmBtnColor:[245, 69, 69, 1],
		    pickerToolBarBg:[255, 255, 255, 1],
		    pickerBg:[241, 241, 241, 1],
		    pickerFontColor:[80, 80, 80, 1],
		    pickerFontSize:30,
		    pickerToolBarFontSize:30,
		    pickerTitleText:'',
		    onPickerConfirm: data => {
		        this.onPickerConfirm(data)
		    },
		    onPickerCancel: data => {
		        this.onPickerCancel(data)
		    },
		    onPickerSelect: data => {
		        this.onPickerSelect(data)
		    }
		});
	}

	show = ()=>{
		Picker.show()
	}

	hide = ()=>{
		Picker.hide()
	}
}

export default class MonthPicker extends Component{
	constructor(props){
		super(props);
	}

	state = {
		isVisible : false
	}

	componentDidMount(){
		const _this = this;
		this.MonthSelect = new MonthPickerBase({
							curMonth : this.props.curDate,
							minDate:this.props.minDate || '2018-01',
							maxDate:this.props.maxDate || '2018-12',
							onPickerConfirm:(data)=>{
								_this.confirm(data);
							},
							onPickerCancel:(data)=>{
								_this.hide(data)
							},
							onPickerSelect:(data)=>{
								//console.log(data)
							}
						})
	}

	monthTransformToNum = (data)=>{
		const year = data[0];
		const monthTxt = data[1];
		let month = '';
		monthes.map((item,index)=>{
			if(item === monthTxt){
				month = index+1
			}
		})
		if(month < 10){
			month = '0'+month;
		}
		//console.log(year+'-'+month)
		return year+'-'+month
	}

	confirm = (data)=>{
		this.setState({isVisible:false});
		this.props.onPickerConfirm(this.monthTransformToNum(data));
	}

	show = ()=>{
		this.setState({isVisible:true});
		var _this = this;
		this.MonthSelect = new MonthPickerBase({
							curMonth : this.props.curDate,
							minDate:this.props.minDate || '2018-01',
							maxDate:this.props.maxDate || '2018-12',
							onPickerConfirm:(data)=>{
								_this.confirm(data);
							},
							onPickerCancel:(data)=>{
								_this.hide(data)
							},
							onPickerSelect:(data)=>{
								//console.log(data)
							}
						})
		this.MonthSelect.show();
	}

	hide = (data)=>{
		this.MonthSelect.hide();
		this.setState({isVisible:false});
		
	}

	render(){
		return  <Modal
					transparent={true}
          			visible={this.state.isVisible}
				>
					<TouchableOpacity
					 	style={styles.maskContainer}
						onPress={()=>this.hide()}
					>
						
					</TouchableOpacity>
				</Modal>
	}
} 

const styles = StyleSheet.create({
	maskContainer:{
		flex:1,
		backgroundColor:'#000',
		opacity:0.5
	}
})

